<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lottery</title>
    <link rel="shortcut icon" href="favicon.png">
    <link rel="icon" href="favicon.png" type="image/x-icon">
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/web.js"></script>

</head>

<body onload="onHtmlLoad()">
<!--
<div class="container">
    <div class="profile profile&#45;&#45;open">
        &lt;!&ndash;<button class="profile__avatar" id="toggleProfile">
         <img src="http://gravatar.com/avatar/69f34259a9d0b7df04f0b50893c469ed?s=80" alt="Avatar" />
        </button>&ndash;&gt;
        <div class="profile__form">
            <div class="profile__fields">

                <div class="field">
                    <input type="text" id="fieldURL" class="input" required readonly placeholder="连接地址"
                           value="localhost:4001"/>
                    &lt;!&ndash;<label for="fieldURL" class="label">连接地址</label>&ndash;&gt;
                </div>
                &lt;!&ndash;pattern=.*\S.*&ndash;&gt;
                <div class="field">
                    <input type="text" id="fieldName" class="input" required placeholder="名字"/>
                    &lt;!&ndash;<label for="fieldName" class="label">名字</label>&ndash;&gt;
                </div>
                <div class="profile__footer">
                    <div class="button_commit raised blue">
                        <div onclick="changeUsername()" class="center" fit>换名字</div>
                        <paper-ripple fit></paper-ripple>
                    </div>
                    <div class="button_commit raised blue">
                        <div onclick="connServerClick()" class="center" fit>上线</div>
                        <paper-ripple fit></paper-ripple>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="model">

</div>-->

<div class="chatbox">
    <div class="chat_top fn-clear">
        <div class="logo"><img src="images/logo.png" width="190" height="60" alt=""/></div>
        <div class="uinfo fn-clear">
            <div class="uface"><img src="images/hetu.jpg" width="40" height="40" alt=""/></div>
            <div class="uname">
                河图
                <i class="fontico down"></i>


                <ul class="managerbox">
                    <li><a href="#"><i class="fontico lock"></i>修改名字</a></li>
                    <li><a href="#"><i class="fontico logout"></i>下线</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="chat_message fn-clear">
        <div class="chat_left">
            <div class="message_box" id="message_box">
                <div class="msg_item fn-clear">
                    <div class="uface"><img src="images/53f44283a4347.jpg" width="40" height="40" alt=""/></div>
                    <div class="item_right">
                        <div class="msg">近日，TIOBE发布了2014年9月的编程语言排行榜，Java、C++跌至历史最低点，前三名则没有变化，依旧是C、Java、Objective-C。
                        </div>
                        <div class="name_time">猫猫 · 3分钟前</div>
                    </div>
                </div>

                <div class="msg_item fn-clear">
                    <div class="uface"><img src="images/53f442834079a.jpg" width="40" height="40" alt=""/></div>
                    <div class="item_right">
                        <div class="msg">(Visual) FoxPro, 4th Dimension/4D, Alice, APL, Arc, Automator, Awk, Bash, bc,
                            Bourne shell, C++CLI, CFML, cg, CL (OS/400), Clean, Clojure, Emacs Lisp, Factor, Forth,
                            Hack, Icon, Inform, Io, Ioke, J, JScript.NET, LabVIEW, LiveCode, M4, Magic, Max/MSP,
                            Modula-2, Moto, NATURAL, OCaml, OpenCL, Oz, PILOT, Programming Without Coding Technology,
                            Prolog, Pure Data, Q, RPG (OS/400), S, Smalltalk, SPARK, Standard ML, TOM, VBScript, Z shell
                        </div>
                        <div class="name_time">白猫 · 1分钟前</div>
                    </div>
                </div>

                <div class="msg_item fn-clear">
                    <div class="uface"><img src="images/hetu.jpg" width="40" height="40" alt=""/></div>
                    <div class="item_right">
                        <div class="msg own">那个统计表也不能说明一切</div>
                        <div class="name_time">河图 · 30秒前</div>
                    </div>
                </div>
            </div>
            <div class="write_box">
                <textarea id="message" name="message" class="write_area" placeholder="说点啥吧..."></textarea>
                <input type="hidden" name="fromname" id="fromname" value="河图"/>
                <input type="hidden" name="to_uid" id="to_uid" value="0">
                <div class="facebox fn-clear">
                    <div class="expression"></div>
                    <div class="chat_type" id="chat_type">群聊</div>
                    <button name="" class="sub_but">提 交</button>
                </div>
            </div>
        </div>

        <div class="chat_right">

            <ul id="all_user" class="user_list" title="双击用户私聊">
                <li class="fn-clear selected"><em>所有人数</em></li>

                <li class="fn-clear" data-id="1"
                    title="你是猪吗?">
                    <span><img src="images/hetu.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>河图</em>
                </li>
                <li class="fn-clear" data-id="1"
                    title="你是猪吗?">
                    <span><img src="images/hetu.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>河图</em>
                </li>
                <li class="fn-clear" data-id="1"
                    title="你是猪吗?">
                    <span><img src="images/hetu.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>河图</em>
                </li>
                <li class="fn-clear" data-id="1"
                    title="你是猪吗?">
                    <span><img src="images/hetu.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>河图</em>
                </li>
                <li class="fn-clear" data-id="1"
                    title="你是猪吗?">
                    <span><img src="images/hetu.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>河图</em>
                </li>
                <li class="fn-clear" data-id="2"><span>
                    <img src="images/53f44283a4347.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>我爱你一定爱到花都开了爱</em>
                </li>
                <li class="fn-clear" data-id="aaaaaaaaaaaa-df234fldaskflkasfasf-23ldfj274907">
                    <span><img src="images/53f442834079a.jpg" width="30" height="30" alt=""/></span>
                    <small class="offline" title="离线"></small>
                    <em>123456789012123456789012</em>
                </li>
            </ul>

            <ul id="lottery_user" class="user_list lottery_list">
                <li class="fn-clear selected"><em>所有参加</em></li>
                <li class="fn-clear" data-id="1"
                    title="你是猪吗?">
                    <span><img src="images/hetu.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>河图</em>
                </li>
                <li class="fn-clear" data-id="2"><span>
                    <img src="images/53f44283a4347.jpg" width="30" height="30" alt=""/></span>
                    <small class="online" title="在线"></small>
                    <em>我爱你一定爱到花都开了爱</em>
                </li>
                <li class="fn-clear" data-id="3">
                    <span><img src="images/53f442834079a.jpg" width="30" height="30" alt=""/></span>
                    <small class="offline" title="离线"></small>
                    <em>123456789012123456789012</em>
                </li>
            </ul>


        </div>

    </div>

</div>
<
<script type="text/javascript">
    $(document).ready(function (e) {
        $('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
        $('.uname').hover(
            function () {
                $('.managerbox').stop(true, true).slideDown(100);
            },
            function () {
                $('.managerbox').stop(true, true).slideUp(100);
            }
        );

        var fromname = $('#fromname').val();
        var to_uid = 0; // 默认为0,表示发送给所有用户
        var to_uname = '';
        $('.lottery_list > li').dblclick(function () {
            to_uname = $(this).find('em').text();
            to_uid = $(this).attr('data-id');

            if (confirm('确定要移除用户[' + to_uname + ']')) {
                alert("...")
            }
            /*if (to_uname == fromname) {
                alert('您不能和自己聊天!');
                return false;
            }
            if (to_uname === '所有用户') {
                $("#toname").val('');
                $('#chat_type').text('群聊');
            } else {
                $("#toname").val(to_uid);
                $('#chat_type').text('您正和 ' + to_uname + ' 聊天');
            }
            $(this).addClass('selected').siblings().removeClass('selected');
            $('#message').focus().attr("placeholder", "您对" + to_uname + "说：");*/
        });

        $('.sub_but').click(function (event) {

            //sendMessageToSome(event, fromname, to_uid, to_uname);


            //TODO a
            /*let allUser = document.getElementById('all_user');
            let alLi = allUser.getElementsByTagName("li");

            for (let i = 0; i < alLi.length; i++) {

                let item = alLi[i];
                let attribute = item.getAttribute("data-id");
                if (attribute === null)
                    continue;

                if (attribute === 'aaaaaaaaaaaa-df234fldaskflkasfasf-23ldfj274907') {
                    let small = item.getElementsByTagName('small')[0];
                    small.className = 'online';

                } else {
                    let small = item.getElementsByTagName('small')[0];
                    small.className = 'offline';
                }
            }*/


        });

        /*按下按钮或键盘按键*/
        $("#message").keydown(function (event) {
            var e = window.event || event;
            var k = e.keyCode || e.which || e.charCode;
            //按下ctrl+enter发送消息
            if ((event.ctrlKey && (k == 13 || k == 10) )) {
                sendMessageToSome(event, fromname, to_uid, to_uname);
            }
        });
    });

    function sendMessageToSome(event, from_name, to_uid, to_uname) {
        var msg = $("#message").val();
        if (to_uname != '') {
            msg = '您对 ' + to_uname + ' 说： ' + msg;
        }
        var htmlData = '<div class="msg_item fn-clear">'
            + '   <div class="uface"><img src="images/hetu.jpg" width="40" height="40"  alt=""/></div>'
            + '   <div class="item_right">'
            + '     <div class="msg own">' + msg + '</div>'
            + '     <div class="name_time">' + from_name + ' · 30秒前</div>'
            + '   </div>'
            + '</div>';
        $("#message_box").append(htmlData);
        $('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
        $("#message").val('');
    }
</script>
</body>
</html>
